<script setup>

import {listTree} from '@/api/system/park/building'
import {dictType, selectPage} from '@/api/system/apartment/weequipment'
import {
  addWeEquipment,
  updateWeEquipment,
  deleteWeEquipment,
  operationWater,
  getOne,
  operationElectricity,
  getOperatingRecord
} from "@/api/system/apartment/weequipment";
import {getGatewayAll} from "@/api/system/apartment/wegateway";


export default {
  data() {
    return {
      dialogVisible: false,
      operatingRecordDialogVisible: false,
      electricityShowDialogVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 3,
        bulidingId: "",//楼栋id
        floorId: "",//楼层id
        roomId: "",//房间id
        equipmentNumber: "",//设备编号
        equipmentName: "",//设备名称
      },
      queryParamsOperatingRecord: {
        pageNum: 1,
        pageSize: 3,
        weId: "1"
      },
      gatewayList: [],
      total: 1,
      totalOperatingRecord: 1,
      title: "",
      menuOptions: [],
      confirmButtonText: '',
      dictTypeList: [],
      treeChoose: [],
      checkList: [],
      treeList: [],
      treeData: [],
      eParams: {},
      tableData: [{}],
      operatingRecordData: [],
      checkTypeList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      //只有选择水电才设置网关
      flagGateway: false,
      ruleForm: {
        equipmentNumber: '',
        equipmentName: '',
        equipmentType: "",
        equipmentGateway: "",
        bulidingId: "",
        floorId: "",
        roomId: "",
        label: ""
      },
      rules: {
        equipmentNumber: [
          {required: true, message: '请输入设备编号', trigger: 'blur'},
        ],
        equipmentName: [
          {required: true, message: '请输入设备名称', trigger: 'blur'},
        ],
        equipmentType: [
          {required: true, message: '请输入设备类型', trigger: 'blur'},
        ]
      }
    }
  }, methods: {
    resetQuery() {
      this.queryParams = [];
      this.resetForm("queryParams");
      this.queryMethods();
    },
    queryMethods() {
      let that = this;
      selectPage(that.queryParams).then(res => {
        that.tableData = res.data.list;
        that.queryParams.pageNum = res.data.pageNum;
        that.queryParams.pageSize = res.data.pageSize;
        that.total = res.data.total;
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    queryNodeClick(data, node, self) {
      let that = this;
      that.queryParams = {
        bulidingId: "",
        floorId: "",
        roomId: "",
        pageNum: 1,
        pageSize: 3
      };
      console.log(data)
      if (data.floorBuildingid == undefined && data.roomFloorid == undefined) {
        that.queryParams.bulidingId = data.id;
      } else if (data.floorBuildingid != undefined) {
        that.queryParams.floorId = data.id;
      } else if (data.roomFloorid != undefined) {
        that.queryParams.roomId = data.id;
      }
      that.queryMethods();
    },
    handleNodeClick(data) {
      let that = this;
      that.ruleForm.addressId = data.name;
      that.ruleForm.label = data.name
      console.log(data)


      that.ruleForm.bulidingId = "";
      that.ruleForm.floorId = "";
      that.ruleForm.roomId = "";

      if (data.floorBuildingid == undefined && data.roomFloorid == undefined) {
        that.ruleForm.bulidingId = data.id;
      } else if (data.floorBuildingid != undefined) {
        that.ruleForm.floorId = data.id;
      } else if (data.roomFloorid != undefined) {
        that.ruleForm.roomId = data.id;
      }
    },
    addWeEquipmentShow() {
      let that = this;
      that.ruleForm = {
        equipmentNumber: '',
        equipmentName: '',
        equipmentType: "",
        equipmentGateway: "",
        bulidingId: "",
        floorId: "",
        roomId: "",
        label: ""
      },
        that.flagGateway = false;
      that.title = "添加设备"
      that.confirmButtonText = "添加"
      that.dialogVisible = true;
    },
    updateWeEquipmentShow(row) {
      let that = this;
      that.ruleForm = {
        id: row.id,
        equipmentNumber: row.equipmentNumber,
        equipmentName: row.equipmentName,
        equipmentType: row.equipmentType,
        equipmentGateway: row.equipmentGateway,
        bulidingId: row.bulidingId,
        floorId: row.floorId,
        roomId: row.roomId,
        label: row.equipmentAddress
      };
      that.title = "修改设备"
      that.confirmButtonText = "修改"
      that.dialogVisible = true;

    },
    submitForm(formName) {
      let that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.title == "添加设备") {
            addWeEquipment(that.ruleForm).then(res => {
              if (res.code == 200) {
                that.$message({
                  message: '添加成功',
                  type: 'success'
                });
                that.dialogVisible = false;
                that.queryMethods();
              } else {
                that.$message({
                  message: '添加失败',
                  type: 'error'
                });
              }
            })
          } else {
            updateWeEquipment(that.ruleForm).then(res => {
              if (res.code == 200) {
                that.$message({
                  message: '修改成功',
                  type: 'success'
                });
                that.dialogVisible = false;
                that.queryMethods();
              } else {
                that.$message({
                  message: '修改失败',
                  type: 'error'
                });
              }
            })
          }
        } else {
          return false;
        }
      });
    },
    changType() {
      if (this.ruleForm.equipmentType == "电表" || this.ruleForm.equipmentType == "水表") {
        this.flagGateway = true;
      } else {
        this.flagGateway = false;
      }

    },
    delWeEquipment(id) {
      let that = this;
      that.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          deleteWeEquipment(id).then(res => {
            if (res.code == 200) {
              that.$message({
                message: '删除成功',
                type: 'success'
              })
              that.queryMethods();

            } else {
              that.$message({
                message: '删除失败',
                type: 'error'
              });
            }
          })
        }
      ).catch(() => {
        that.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize;
      this.queryMethods();
    },
    handleCurrentChange(pageNum) {
      this.queryParams.pageNum = pageNum;
      this.queryMethods();
    },
    operationE(id, type) {
      let that = this;

      operationElectricity(id, type).then(function (data) {
        if (data.code == 200) {
          that.$message({
            message: '操作成功',
            type: 'success'
          });
          if (type == 7) {
            //发请求再次取出来
            getOne(id)
              .then(function (data) {
                that.eParams = data.data;
                console.log(that.eParams)
              })
            that.electricityShowDialogVisible = true;
          }
        } else {
          that.$message({
            message: '操作失败',
            type: 'error'
          });
        }
      })

    },
    operationW(id, type) {
      console.log(id)
      console.log(type)
      let that = this;
      operationWater(id, type).then(function (data) {
        if (data.code == 200) {
          that.$message({
            message: '操作成功',
            type: 'success'
          });
        } else {
          that.$message({
            message: '操作失败',
            type: 'error'
          });
        }
      })
    },
    operatingRecord(id) {
      let that = this;
      that.operatingRecordDialogVisible = true;
      that.queryParamsOperatingRecord.weId = id;
      getOperatingRecord(that.queryParamsOperatingRecord).then(function (data) {
        console.log(data)
        that.operatingRecordData = data.data.list;
        that.operatingRecordData.pageNum = data.data.pageNum;
        that.operatingRecordData.pageSize = data.data.pageSize;
        that.totalOperatingRecord = data.data.total;
      })
    },
    getElectricityShow(id) {
      let that = this;
      that.electricityShowDialogVisible = true;
    }

  },
  created() {
    let that = this;
    //树
    listTree().then(function (res) {
      that.treeList = res.data;
      that.treeData = res.data;
      that.menuOptions.push(res.data)
      console.log(that.menuOptions)
    })
    //所有设备类型
    dictType().then(function (res) {
      that.dictTypeList = res.data;
    })
    //所有网关
    getGatewayAll().then(function (res) {
      that.gatewayList = res.data;
    })
    that.queryMethods();
  }
}
</script>

<template>
  <div class="app-container">
    <div style="float: left;height: 100% ; width: 20%">
      <el-form :model="queryParams" :inline="true">
        <el-form-item>
          <el-input
            style="width: 250px"
            v-model="queryParams.equipmentAddress"
            placeholder="请输入位置信息"
            clearable
            size="small"
          />
        </el-form-item>
      </el-form>
      <el-tree :data="treeList" :props="defaultProps" @node-click="queryNodeClick"></el-tree>
    </div>
    <div style="float: left;height: 100% ; width: 80%">
      <el-form :model="queryParams" :inline="true">
        <el-form-item label="设备编号">
          <el-input
            v-model="queryParams.equipmentNumber"
            placeholder="请输入设备编号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input
            v-model="queryParams.equipmentName"
            placeholder="请输入设备名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryMethods()">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" style="margin-top:30px;margin-bottom: 30px" icon="el-icon-plus"
                 @click="addWeEquipmentShow">
        添加
      </el-button>

      <!--      主表格信息-->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="equipmentName"
          align="center"
          label="设备名称"
          width="120">
        </el-table-column>
<!--        <el-table-column-->
<!--          align="center"-->
<!--          label="设备状态"-->
<!--          width="120">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag type="success" v-if="scope.row.equipmentStatus==1">正常</el-tag>-->
<!--            <el-tag type="danger" v-if="scope.row.equipmentStatus==2">不正常</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          prop="equipmentAddress"
          align="center"
          label="设备位置"
          width="120">
        </el-table-column>
        <el-table-column
          prop="equipmentNumber"
          align="center"
          label="设备编号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="equipmentType"
          align="center"
          label="设备类型"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          label="设备所剩金额"
          width="120">
          <template slot-scope="scope">
            {{ scope.row.equipmentResidueMoney }}元
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="设备剩余量"
          width="120">
          <template slot-scope="scope">
            {{ scope.row.equipmentResidueNumber }}
            {{ scope.row.equipmentType == '电表' ? '度' : '吨' }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="水表阀门状态"
          width="120">
          <template slot-scope="scope">
            {{ scope.row.waterValveStatus != null ? scope.row.waterValveStatus : '-' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="waterMeterStatus"
          align="center"
          label="电表总状态"
          width="120">
          <template slot-scope="scope">
            {{ scope.row.waterMeterStatus != null ? scope.row.waterMeterStatus : '-' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="energyMeterAstatus"
          align="center"
          label="电表A路状态"
          width="120">
          <template slot-scope="scope">
            {{ scope.row.energyMeterAstatus != null ? scope.row.energyMeterAstatus : '-' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="energyMeterBstatus"
          align="center"
          label="电表B路状态"
          width="120">
          <template slot-scope="scope">
            {{ scope.row.energyMeterBstatus != null ? scope.row.energyMeterBstatus : '-' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="joinTime"
          align="center"
          label="入网状态"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="300">
          <template slot-scope="scope">
            <el-tooltip content="编辑" effect="dark" placement="top">
              <el-button type="primary" @click="updateWeEquipmentShow(scope.row)" icon="el-icon-edit"
                         circle></el-button>
            </el-tooltip>
            <el-tooltip content="删除" effect="dark" placement="top">
              <el-button type="danger" icon="el-icon-delete" @click="delWeEquipment(scope.row.id)" circle></el-button>
            </el-tooltip>
            <el-tooltip content="重新开户" v-if="scope.row.equipmentType == '电表'" effect="dark" placement="top">
              <el-button type="warning" icon="el-icon-refresh" circle></el-button>
            </el-tooltip>
            &nbsp;
            <el-tooltip content="操作" v-if="scope.row.equipmentType == '电表'" effect="dark" placement="top">
              <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                     <el-button type="info" icon="el-icon-setting" circle></el-button>
                  </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item class="clearfix" @click.native="operationE(scope.row.id,7)">
                    <i class="el-icon-bottom"></i>获取电表参数
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click.native="operatingRecord(scope.row.id)">
                    <i class="el-icon-bottom"></i>操作记录
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click.native="operationE(scope.row.id,2)">
                    <i class="el-icon-bottom"></i>拉总闸
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click.native="operationE(scope.row.id,1)">
                    <i class="el-icon-bottom"></i>合总闸
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click.native="operationE(scope.row.id,4)">
                    <i class="el-icon-sort-down"></i>拉A路闸
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click.native="operationE(scope.row.id,3)">
                    <i class="el-icon-sort-up"></i>合A路闸
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click.native="operationE(scope.row.id,6)">
                    <i class="el-icon-arrow-down"></i>拉B路闸
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click.native="operationE(scope.row.id,5)">
                    <i class="el-icon-arrow-up"></i>合B路闸
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-tooltip>
            <el-tooltip content="操作" v-if="scope.row.equipmentType == '水表'" effect="dark" placement="top">
              <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                     <el-button type="info" icon="el-icon-setting" circle></el-button>
                  </span>
                <el-dropdown-menu slot="dropdown">
<!--                  <el-dropdown-item class="clearfix" @click.native="operationW(scope.row.id,102)">-->
<!--                    <i class="el-icon-arrow-down"></i>获取水表参数-->
<!--                  </el-dropdown-item>-->
                  <el-dropdown-item class="clearfix" @click.native="operatingRecord(scope.row.id)">
                    <i class="el-icon-bottom"></i>操作记录
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click.native="operationW(scope.row.id,101)">
                    <i class="el-icon-bottom"></i>关阀
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click.native="operationW(scope.row.id,100)">
                    <i class="el-icon-top"></i>开阀
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.queryParams.pageNum"
          :page-size="this.queryParams.pageSize"
          :page-sizes="[1,2,3]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

      <!--      操作记录-->
      <el-dialog
        title="操作记录"
        :visible.sync="operatingRecordDialogVisible"
        width="70%">
        <el-table
          :data="operatingRecordData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="number"
            label="设备编号"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="operationUser"
            align="center"
            label="操作用户"
            width="180">
          </el-table-column>
          <el-table-column
            prop="operationContent"
            align="center"
            label="操作内容">
          </el-table-column>
          <el-table-column
            prop="operationIp"
            align="center"
            label="操作ip">
          </el-table-column>
          <el-table-column
            align="center"
            prop="operationType"
            label="操作类型">
          </el-table-column>
          <el-table-column
            align="center"
            prop="operationTime"
            label="操作时间">
          </el-table-column>
        </el-table>
        <!--        <div class="block">-->
        <!--          <el-pagination-->
        <!--            @size-change="handleSizeChange1"-->
        <!--            @current-change="handleCurrentChange1"-->
        <!--            :current-page="this.queryParamsOperatingRecord.pageNum"-->
        <!--            :page-size="this.queryParamsOperatingRecord.pageSize"-->
        <!--            :page-sizes="[1,2,3]"-->
        <!--            layout="total, sizes, prev, pager, next, jumper"-->
        <!--            :total="totalOperatingRecord">-->
        <!--          </el-pagination>-->
        <!--        </div>-->
      </el-dialog>

      <!--      添加修改-->
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="50%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="设备编号" prop="equipmentNumber">
            <el-input v-model="ruleForm.equipmentNumber"></el-input>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select style="width: 190px;" v-model="ruleForm.equipmentType" @change="changType"
                       placeholder="请选择设备类型">
              <el-option
                v-for="o in dictTypeList"
                :key="o.dictLabel"
                :value="o.dictLabel"
                :label="o.dictLabel"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称" prop="equipmentName">
            <el-input v-model="ruleForm.equipmentName"></el-input>
          </el-form-item>
          <el-form-item label="空间位置">
            <el-select style="width: 350px;" v-model="ruleForm.addressId" placeholder="请选择空间位置" ref="selectTree">
              <el-option :key="ruleForm.addressId" :value="ruleForm.addressId" :label="ruleForm.label" hidden="hidden"/>
              <el-tree :data="treeData"
                       :props="defaultProps"
                       node-key="id"
                       accordion
                       highlight-current
                       @node-click="handleNodeClick"/>
            </el-select>
          </el-form-item>
          <el-form-item label="所属网关" v-if="flagGateway==true">
            <el-select style="width: 190px;" v-model="ruleForm.equipmentGateway" placeholder="请选择所属网关">
              <el-option
                v-for="o in gatewayList"
                :key="o.gatewayName"
                :value="o.id"
                :label="o.gatewayName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">{{ confirmButtonText }}</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!--      操作记录-->
      <el-dialog
        title="电表参数"
        :visible.sync="electricityShowDialogVisible"
        width="70%">
        <p>A路电流{{eParams.aCurrent}}&nbsp;&nbsp;&nbsp;A路功率{{eParams.aPower}}&nbsp;&nbsp;&nbsp;A路电压{{eParams.aVoltage}}</p>
        <p>A路功率因素{{eParams.aPowerFactor}}&nbsp;&nbsp;&nbsp;A现在功率{{eParams.aApparentPower}}&nbsp;&nbsp;&nbsp;B路电流{{eParams.bCurrent}}</p>
        <p>B路功率{{eParams.bPower}}&nbsp;&nbsp;&nbsp;B路电压{{eParams.bVoltage}}&nbsp;&nbsp;&nbsp;B路功率因素{{eParams.bPowerFactor}}</p>
        <p>B路现在功率{{eParams.bApparentPower}}&nbsp;&nbsp;&nbsp;总功率{{eParams.sumPower}}&nbsp;&nbsp;&nbsp;总现在总功率{{eParams.sumApparentPower}}</p>
        <p>电网频率{{eParams.frequency}}</p>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
